<!-- 系统配置 -->
<template>
    <div class="myuser">
        <div class="usertitle">后台系统配置信息</div>
        <div class="user_1">
            <p style="font-size: 17px;">系统配置相关选项值</p>
        </div>
        <!-- 配置内容 -->
        <div class="config_1">
            <div  class="config_2">
              <p class="config_3">1.消息设置:</p>
              <div class="config_4">
                <div class="config_5">
                  <div class="mb-2 flex items-center text-sm">
                    <span>系统消息是否开启：</span>
                    <el-radio-group v-model="radio1" class="ml-4">
                      <el-radio label="1" size="large">是</el-radio>
                      <el-radio label="2" size="large">否</el-radio>
                    </el-radio-group>
                  </div>
                  <div class="mb-2 flex items-center text-sm">
                    <span>预约提醒是否开启：</span>
                    <el-radio-group v-model="radio1" class="ml-4">
                      <el-radio label="1" size="large">是</el-radio>
                      <el-radio label="2" size="large">否</el-radio>
                    </el-radio-group>
                  </div>
                </div>
               <div class="config_6">
                  <div class="mb-2 flex items-center text-sm">
                    <span>收到消息是否弹出小窗口：</span>
                    <el-radio-group v-model="radio1" class="ml-4">
                      <el-radio label="1" size="large">是</el-radio>
                      <el-radio label="2" size="large">否</el-radio>
                    </el-radio-group>
                  </div>
                  <div class="mb-2 flex items-center text-sm">
                    <span>预约消息是否弹出小窗口：</span>
                    <el-radio-group v-model="radio1" class="ml-4">
                      <el-radio label="1" size="large">是</el-radio>
                      <el-radio label="2" size="large">否</el-radio>
                    </el-radio-group>
                  </div>
               </div>
              </div>
            </div>
            <!-- 第二点 -->
              <div  class="config_8">
                <p>2.文件设置:</p>
                <div class="config_9">
                  <div style="margin-left:40px;">
                    <div>
                    <span>上传文件格式：</span>
                    <el-checkbox v-model="checked1" label="docx" size="large" />
                    <el-checkbox v-model="checked2" label="txt" size="large" />
                    <el-checkbox v-model="checked3" label="xls" size="large" />
                    <el-checkbox v-model="checked4" label="pdf" size="large" />
                  </div>
                  <div class="mb-2 flex items-center text-sm">
                    <span>上传文件大小不超过：</span>
                    <el-radio-group v-model="radio2" class="ml-4">
                      <el-radio label="1" size="large">10M</el-radio>
                      <el-radio label="2" size="large">5M</el-radio>
                      <el-radio label="3" size="large">2M</el-radio>
                    </el-radio-group>
                  </div>
                  </div>
                </div>
              </div>
            <!-- 第三点 -->
              <div  class="config_8">
                <p>3.图片设置:</p>
                <div style="margin-left:40px;">
                    <div >
                      <span>图片格式：</span>
                      <el-checkbox v-model="checked11" label="bmp" size="large" />
                      <el-checkbox v-model="checked22" label="png" size="large" />
                      <el-checkbox v-model="checked33" label="gif" size="large" />
                      <el-checkbox v-model="checked44" label="jpg" size="large" />
                    </div>
                    <div class="mb-2 flex items-center text-sm">
                      <span>图片大小：</span>
                      <el-radio-group v-model="radio3" class="ml-4">
                        <el-radio label="1" size="large">2M</el-radio>
                        <el-radio label="2" size="large">1M</el-radio>
                        <el-radio label="3" size="large">0.5M</el-radio>
                      </el-radio-group>
                    </div>
                  </div>
                </div>
              <!-- 第四点 -->
              <div  class="config_10">
                <p>4.邮件设置:</p>
                <div class="config_11">
                  <div class="mb-2 flex items-center text-sm">
                    <span>邮件发送方式：</span>
                    <el-radio-group v-model="radio4" class="ml-4">
                      <el-radio label="1" size="large">使用外部SMTP发送</el-radio>
                      <el-radio label="2" size="large">使用本地服务器发送</el-radio>
                    </el-radio-group>
                  </div>
                  <div v-if="radio4 =='1'">
                    <div style="margin-left:38px;">
                      <span>发信人邮件：</span>
                      <el-input v-model="input" placeholder="Please input" style="width:300px;" />
                    </div>
                    <div class="config_aa">
                      <span>SMTP服务器地址：</span>
                      <el-input v-model="input" placeholder="Please input" style="width:300px;" />
                    </div>
                    <div class="config_aa">
                      <span>SMTP服务器端口：</span>
                      <el-input v-model="input" placeholder="Please input" style="width:300px;" />
                    </div>
                    <div class="config_aa" style="margin-left:28px;">
                      <span>SMTP用户名：</span>
                      <el-input v-model="input" placeholder="Please input" style="width:300px;" />
                    </div>
                    <div class="config_aa" style="margin-left:40px;">
                      <span>SMTP密码：</span>
                      <el-input v-model="input" placeholder="Please input" style="width:300px;" />
                    </div>
                    <div>
                      <el-button type="primary" style="margin-left: 200px; margin-top: 20px;">确认</el-button>
                    </div>
                  </div>
                </div>
              </div>
        </div>
        <div class="user_11"> 
           <div class="user_12">
                <el-button type="primary" class="user_12_a">确认保存</el-button>
                <el-button type="info" class="user_12_b">取消</el-button>
           </div>
        </div>
    </div>
</template>

<script lang="ts">
  import {ref,defineComponent} from "vue"
  export default defineComponent({
  setup() {
    const checked1 = ref(true)
    const checked2 = ref(true)
    const checked3 = ref(true)
    const checked4 = ref(true)
    const checked11 = ref(true)
    const checked22 = ref(true)
    const checked33 = ref(true)
    const checked44 = ref(true)
    const radio1 = ref('1')
    const radio2 = ref('1')
    const radio3 = ref('1')
    const radio4 = ref('1')
    const input = ref('')
    return{
      radio1,checked1,checked2,checked3,checked4,radio2,checked11,checked22,checked33,checked44,radio3,radio4,input
    }
  }
})
</script>

<style scoped>
    .myuser {
  width: calc(100% - 40px);
  height: 100%;
}
.usertitle {
  width: calc(100% - 40px);
  height: 100px;
  font-size: 20px;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
}
.user_1 {
  width: calc(100% - 40px);
  height: 50px;
  border-bottom: 1px solid #D7D7D7;
  display: flex;
  align-items: center;
  margin-left:15px
}
.config_1{
  width:  calc(100% - 40px);
  margin-left: 20px;
  margin-top: 20px;
}
.config_2{
  width: calc(100% - 40px);
  height: 120px;
}
.config_4{
  width: 700px;
  height: 100px;
  display: flex;
  margin-left: 40px;
}
.config_5{
  width: 350px;
  height: 100px;
}
.config_6{
  width: 350px;
  height: 100px;
}
.config_8{
  width: calc(100% - 40px);
  height: 120px;
}
.config_10{
  width: calc(100% - 40px);
  
}
.config_11{
  margin-left: 40px;
}
.config_aa{
  margin-top: 10px;
}
.user_11{
    width: calc(100% - 40px);
    height: 80px;
    margin-left:15px;
    display: flex;
    justify-content: center;
   
}
.user_12{
    width: 400px;
    height: 80px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    /* background-color: pink; */
}
.user_12_a{
    width: 120px;
    height: 40px;
}
.user_12_b{
    width: 120px;
    height: 40px;
}
</style>